<template>
	<view class="mainpadding2">
		<view class="flexbetween mainpadding">
			<view class="titletext  xiaohei nofonweight" style="color: #ff5c00;" @click="changeMonth('pre')">上一月
			</view>
			<view class="titletext xiaohei fonweight">{{y+'年'+formatNum(m)+'月'}}</view>
			<view class="titletext  xiaohei nofonweight" style="color: #ff5c00;" @click="changeMonth('next')">下一月
			</view>
		</view>
		<view class="margin_top">
			<scroll-view class="white_nowrap" scroll-x>
				<view class="flexleft">
					<view class="margin_right2" v-for="(item,index) in lclist">
						<view :class="lc_id==item.id?'cateSelect':'cateNoSelect'" @click="selectCate(item)">
							{{item.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flexleft" style="align-items: flex-start;">
			<view class="flexcolumn">
				<view class="xiaohei main_size itemleftbox flexcenter" :class="index==0?'margin_top6':''"
					v-for="(item,index) in leftzt" :key="index">{{item.num}}</view>
			</view>
			<!-- choose_status:0没有信息，1可以選擇，2已售，3不可選擇，4已選擇 -->
			<scroll-view class="margin_top" scroll-x="true" style="width: 85%;">
				<view class="flexleft" style="margin-right: 2rpx;">
					<view class="flexcolumn" v-for="(item,index) in rightHouse" :key="index">
						<view class="xiaohei main_size" style="width: 120rpx;text-align: center;">{{item.name}}
						</view>
						<view class="itemboxzs flexcenter xiaobai" style="font-size: 26rpx;" v-for="(ite,inde) in item.childhouse"
							:key="inde">
							<text v-show="ite.house_num==0" style="color: #ff0000;">已住滿</text>
							<text v-show="ite.house_num!=0"><text style="font-size: 34rpx;color: #ff0000;">{{ite.house_num}}</text>閒</text>
							
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth() + 1, // 月
				leftzt: [],
				rightHouse: [],
				lastTapDiffTime: 0,
				lastTapTimeoutFunc: null,
				lclist: [],
				lc_id: 0,
			}
		},
		onLoad() {
			this.getzhusuInfo()
			this.getqy()
		},
		methods: {
			formatNum(num) {
				let res = Number(num);
				return res < 10 ? '0' + res : res;
			},
			selectCate(item) {
				this.lc_id = item.id
				this.getzhusuInfo()
			},
			getqy() {
				this.http.request("/api/shop/shopAreaIndex", "GET", {
					shop_id: uni.getStorageSync("shop_id"),
				}).then(res => {
					this.lclist = res.data
					res.data.unshift({
						id: 0,
						name: "全部"
					})
				})
			},
			getzhusuInfo() {
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				this.http.request('/api/Hotel/showHotelOrderIndex', 'POST', {
					shop_id: uni.getStorageSync("shop_id"),
					date: this.y + "-" + this.m,
					lc_id: this.lc_id,
				}).then(res => {
					uni.hideLoading()
					let arr = [] //订房情况
					res.data.dateData.forEach((item, index) => {
						let pushdata = {
							name: item.day, //当前日
							childhouse: []
						}
						res.data.ssinfo.forEach(curr => {
							pushdata.childhouse.push({
								deskId: curr.id,
								house_num: curr.house_num[index]
							})
						})
						arr.push(pushdata)
					})
					this.leftzt = res.data.ssinfo
					console.log(arr);
					this.rightHouse = arr
				})
			},
			changeMonth(type) {
				if (type == 'pre') {
					// if (this.y == new Date().getFullYear() && this.m == new Date().getMonth() + 1) {
					// 	return false
					// }
					if (this.m + 1 == 2) {
						this.m = 12;
						this.y = this.y - 1;
					} else {
						this.m = this.m - 1;
					}
				} else {
					if (this.m + 1 == 13) {
						this.m = 1;
						this.y = this.y + 1;
					} else {
						this.m = this.m + 1;
					}
				}
				this.getzhusuInfo()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cateSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		text-align: center;
		background: rgba(255, 92, 0, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF5C00;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	.cateNoSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		line-height: 53rpx;
		text-align: center;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.margin_top6 {
		margin-top: 60rpx !important;
	}

	.bghuang {
		background-color: #f6a347 !important;
	}

	.bghong {
		background-color: #ff0000 !important;
	}

	.bgqian {
		background-color: #76cb9d !important;
	}

	.bglan {
		background-color: #0075ff !important;
	}

	.itemboxzs {
		width: 120rpx;
		height: 70rpx;
		margin-top: 2rpx;
		margin-right: 2rpx;
		color: #333;
		background-color: #fae9e0;
	}

	.itemleftbox {
		width: 100rpx;
		height: 70rpx;
		margin-top: 2rpx;
		text-align: center;
	}

	.toumd {
		opacity: 0.5;
	}

	.xiahuaxian1 {
		border-bottom: 1rpx solid #F5F5F5;
	}

	.nerbox {
		padding: 38rpx 31rpx;
	}

	.wexbxo {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		// height: 100rpx;
	}

	.youbk {
		border-right: 2rpx solid #F5F5F5;
	}

	.yxzbox {
		background: #1BA95B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.lvbox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		margin: 30rpx 30rpx 0 0;
		background-color: #1ba95d;
	}

	.xiaolvbox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #999;
		margin: 30rpx 30rpx 0 0;
		background-color: #effff6;
		font-size: 26rpx;
	}

	.huibox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #999;
		margin: 30rpx 30rpx 0 0;
		background-color: #f7f7f7;
		font-size: 26rpx;
	}

	.shijbox {
		padding: 12rpx 20rpx;
		background: #1BA95B;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.chanbox {
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #1BA95B;
		// width: 260rpx;
	}

	.yixlbtn {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		background: #0075ff;
		width: 40rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.wexzlbtn {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 40rpx;
		background: #1BA95B;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.qianbtn {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 40rpx;
		background: #cdcdcd;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.huibtn {
		padding: 10rpx 20rpx;
		background: #F5F5F5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		width: 40rpx;
		color: #cdcdcd;
		background: #cdcdcd;
	}

	.weixzx {
		padding-bottom: 10rpx;
		// border-bottom: 6rpx solid #F5F5F5;
		// background: #1BA95B;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	.zitixhx {
		padding-bottom: 10rpx;
		border-bottom: 6rpx solid #1BA95B;
		// background: #1BA95B;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	page {
		background-color: #F9F9F9;
	}
</style>